/* ========== GLOBAL & RESET ========== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', system-ui, -apple-system, sans-serif;
     padding-top: 76px;
     background: #fafcff;
     scroll-behavior: smooth;
     /* enables smooth scroll for anchor links */
 }

 /* ================= GLOBAL SMOOTH SCROLL ================= */

 html {
     scroll-behavior: smooth;
 }

 /* ================= PRELOADER ================= */

 .preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     /* DECENT PROFESSIONAL BACKGROUND */
     background: linear-gradient(135deg, #f4f8fc, #eaf2fb);

     display: flex;
     align-items: center;
     justify-content: center;

     z-index: 99999;
     transition: opacity 0.6s ease, visibility 0.6s;
 }

 /* main loader */

 .loader {
     position: relative;
     width: 120px;
     height: 120px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* outer ring */

 .loader-outter {
     position: absolute;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     border: 4px solid transparent;
     border-top: 4px solid #0d6efd;
     border-right: 4px solid #4db3ff;
     animation: rotate 2s linear infinite;
 }

 /* inner ring */

 .loader-inner {
     position: absolute;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 4px solid transparent;
     border-bottom: 4px solid #00c6ff;
     border-left: 4px solid #0072ff;
     animation: rotateReverse 1.5s linear infinite;
 }

 /* heartbeat indicator */

 .indicator svg {
     stroke: #0d6efd;
     stroke-width: 2;
     fill: none;
 }

 #front {
     stroke: #4db3ff;
     stroke-dasharray: 48;
     stroke-dashoffset: 48;
     animation: heartbeat 1.4s ease infinite;
 }

 /* glow */

 .loader::after {
     content: '';
     position: absolute;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: radial-gradient(circle, #4db3ff33, transparent);
     animation: pulseGlow 2s ease infinite;
 }

 /* animations */

 @keyframes rotate {
     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes rotateReverse {
     100% {
         transform: rotate(-360deg);
     }
 }

 @keyframes heartbeat {
     0% {
         stroke-dashoffset: 48;
     }

     50% {
         stroke-dashoffset: 0;
     }

     100% {
         stroke-dashoffset: -48;
     }
 }

 @keyframes pulseGlow {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.2;
     }
 }

 /* ========== NAVBAR (fixed, crisp) ========== */
 .navbar {
     background: #ffffff !important;
     border-bottom: 1px solid rgba(0, 0, 0, 0.03);
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1030;
     box-shadow: 0 6px 18px rgba(0, 20, 40, 0.06);
 }

 .btn-book-demo {
     background: radial-gradient(circle at 30% 20%, #51b0e7, #2C2D3F);
     color: white;
     border: none;
     border-radius: 10px;
     padding: 10px 28px;
     font-weight: 600;
     letter-spacing: 0.3px;
     box-shadow: 0 0 10px #0d6efd55, 0 0 20px #0d6efd33;
     transition: all 0.25s ease;
     display: inline-block;
     text-decoration: none;
 }

 .btn-book-demo:hover {
     transform: scale(1.02) translateY(-2px);
     box-shadow: 0 0 18px #0d6efdcc, 0 0 30px #0d6efd80;
     background: radial-gradient(circle at 30% 20%, #60c0f0, #3a3c55);
     color: white;
 }

 /* navbar links */
 .navbar-nav .nav-link {
     font-size: 1rem;
     padding: 8px 18px !important;
     color: #1e2a41 !important;
     font-weight: 500;
     border-radius: 40px;
     transition: 0.2s;
 }

 .navbar-nav .nav-link:hover {
     background: rgba(13, 110, 253, 0.06);
     color: #0d6efd !important;
 }

 .dropdown-menu {
     border-radius: 18px;
     border: none;
     padding: 10px 0;
     box-shadow: 0 25px 40px -10px rgba(0, 30, 60, 0.2);
 }

 .dropdown-item {
     font-weight: 500;
     padding: 10px 22px;
     transition: 0.2s;
 }

 .dropdown-item:hover {
     background: #e3f0ff;
     color: #0d6efd;
     padding-left: 28px;
 }

 /* mobile nav adjustments: the demo button inside dropdown */
 .navbar-collapse .btn-book-demo.mobile-book {
     width: 100%;
     margin: 12px 0 8px;
     text-align: center;
     padding: 12px 20px;
     border-radius: 40px;
     font-size: 1.1rem;
 }

 @media (max-width:991px) {
     body {
         padding-top: 66px;
     }

     .navbar .d-lg-block {
         display: none !important;
         /* hide desktop button */
     }
 }

 @media (max-width:433px) {
     body {
         padding-top: 60px;
     }
 }

 /* ========== HERO SECTION ========== */
 .hero {
     padding: 50px 0 20px 0;
     background: linear-gradient(145deg, #ffffff 0%, #f3f9ff 100%);
 }

 .hero h1 {
     font-size: 44px;
     font-weight: 800;
     background: linear-gradient(130deg, #0a3a66, #0d6efd);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 1rem;
 }

 .hero p {
     text-align: justify;
     line-height: 1.7;
     font-size: 1.05rem;
     color: #1e2f44;
 }

 .hero .btn-primary {
     background: #0d4d8b;
     border: none;
     border-radius: 40px;
     padding: 12px 36px;
     font-weight: 600;
     box-shadow: 0 8px 18px #0d4d8b40;
     transition: 0.25s;
     text-decoration: none;
 }

 .hero .btn-primary:hover {
     background: #0a3a68;
     transform: translateY(-3px);
     box-shadow: 0 12px 24px #0d4d8b70;
 }

 /* Hero image container with zoom+glow on hover (no continuous movement) */
 .hero .img-hover-effect {
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: 24px;
     transition: box-shadow 0.4s ease;
 }

 .hero .img-hover-effect img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 24px;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     box-shadow: 0 12px 20px rgba(0, 80, 120, 0.2);
 }

 .hero .img-hover-effect:hover img {
     transform: scale(1.03);
     /* smooth zoom in on hover only */
     box-shadow: 0 0 25px #0d6efd, 0 0 40px #4db3ff;
     /* glowing effect */
 }

 /* ========== SECTION TITLE ========== */
 .section-title {
     text-align: center;
     font-weight: 700;
     font-size: 32px;
     color: #0d4d8b;
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
     padding: 0 20px 10px;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 10%;
     width: 80%;
     height: 4px;
     background: linear-gradient(90deg, transparent, #4db3ff, #0d6efd, #4db3ff, transparent);
     border-radius: 4px;
 }

 .section-title.shimmer {
     background: linear-gradient(120deg, #0d4d8b 20%, #4db3ff 40%, #0d4d8b 60%);
     background-size: 200% auto;
     color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
     animation: titleShine 4s linear infinite;
 }

 @keyframes titleShine {
     0% {
         background-position: 0% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 /* ========== OBJECTIVES CARDS ========== */
 .objectives {
     padding: 60px 0 80px;
     background: #f2f8ff;
 }

 .objective-card {
     background: white;
     padding: 30px 18px;
     border-radius: 40px;
     box-shadow: 0 15px 30px #d9e6f5;
     transition: 0.3s;
     height: 100%;
     border: 1px solid rgba(77, 179, 255, 0.2);
     text-align: center;
 }

 .objective-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 35px #b3d6f5;
 }

 .circle {
     width: 75px;
     height: 75px;
     background: #0d4d8b;
     color: white;
     font-weight: 700;
     font-size: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin: 0 auto 20px;
     box-shadow: 0 0 0 0 rgba(13, 77, 139, 0.5);
     transition: 0.3s;
 }

 .objective-card:hover .circle {
     box-shadow: 0 0 0 8px rgba(77, 179, 255, 0.4), 0 0 30px #0d6efd;
     background: #0b5cad;
     transform: scale(1.02);
 }

 .objectives p {
     text-align: center;
     font-weight: 500;
     font-size: 1.05rem;
     color: #1d3557;
     margin-bottom: 0;
 }

 /* ========== BENEFITS ========== */
 .benefits {
     padding: 80px 0;
     background: white;
 }

 .benefits img {
     border-radius: 30px;
     box-shadow: 0 25px 35px -5px #afcbe1;
     transition: 0.4s;
 }

 .benefits img:hover {
     transform: scale(1.01) translateY(-5px);
     box-shadow: 0 30px 40px #7fb2d5;
 }

 .benefits ul {
     padding-left: 20px;
     list-style-type: disc;
 }

 .benefits li {
     margin-bottom: 18px;
     font-size: 1.1rem;
     font-weight: 450;
     padding-left: 5px;
 }

 /* ========== FOOTER (pristine) ========== */
 .footer-section {
     background: #0d4e87;
     color: #fff;
     padding-top: 50px;
     position: relative;
     overflow: hidden;
     box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .footer-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 40%, rgba(100, 200, 255, 0.15) 0%, transparent 45%),
         radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
     pointer-events: none;
 }

 .footer-top {
     padding-bottom: 30px;
     position: relative;
 }

 .footer-col h5 {
     font-weight: 600;
     margin-bottom: 20px;
     position: relative;
     display: inline-block;
 }

 .footer-col h5::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 40px;
     height: 3px;
     background: #4db3ff;
     transition: width 0.3s ease;
 }

 .footer-col:hover h5::after {
     width: 60px;
 }

 .footer-col ul {
     list-style: none;
     padding: 0;
 }

 .footer-col ul li {
     margin-bottom: 8px;
 }

 .footer-col ul li a {
     color: #d6e6f7;
     text-decoration: none;
     font-size: 14px;
     transition: all 0.2s;
     display: inline-block;
     position: relative;
 }

 .footer-col ul li a::before {
     content: '▹';
     position: absolute;
     left: -15px;
     top: 50%;
     transform: translateY(-50%);
     color: #4db3ff;
     opacity: 0;
     transition: 0.2s;
 }

 .footer-col ul li a:hover {
     color: #ffffff;
     padding-left: 20px;
 }

 .footer-col ul li a:hover::before {
     opacity: 1;
     left: 0;
 }

 .social-icons a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.25);
     background: rgba(255, 255, 255, 0.05);
     color: white;
     margin-right: 8px;
     transition: 0.3s;
     overflow: hidden;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .social-icons a:hover {
     transform: translateY(-4px) scale(1.1);
     border-color: #4db3ff;
     box-shadow: 0 8px 18px #4db3ffaa;
 }

 .footer-col p {
     padding: 10px;
     border-radius: 16px;
     transition: 0.2s;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(5px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .footer-col p:hover {
     border-left: 3px solid #4db3ff;
     background: rgba(255, 255, 255, 0.07);
     transform: translateX(4px);
 }

 .footer-bottom {
     background: #2f80c3;
     padding: 15px 0;
     font-size: 14px;
     position: relative;
     overflow: hidden;
     margin-top: 20px;
 }

 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 1px;
     background: linear-gradient(90deg, transparent, #fff, transparent);
     animation: bottomGlow 8s infinite linear;
 }

 @keyframes bottomGlow {
     0% {
         left: -100%;
     }

     50% {
         left: 100%;
     }

     100% {
         left: 100%;
     }
 }

 .footer-bottom a {
     color: #ffffff;
     text-decoration: underline;
     transition: 0.2s;
 }

 .footer-bottom a:hover {
     text-shadow: 0 0 8px white;
 }

 @media (max-width: 768px) {
     .footer-col {
         text-align: center;
     }

     .footer-col h5::after {
         left: 50%;
         transform: translateX(-50%);
     }

     .footer-col ul li a::before {
         display: none;
     }

     .social-icons {
         justify-content: center;
         display: flex;
     }
 }

 .navbar-brand img {
     filter: drop-shadow(0 2px 6px #0d6efd55);
 }

 .btn-book-demo {
     position: relative;
     overflow: hidden;
 }

 .btn-book-demo::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -60%;
     width: 200%;
     height: 200%;
     background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
     transform: rotate(25deg);
     transition: 0.7s;
     opacity: 0;
 }

 .btn-book-demo:hover::after {
     opacity: 1;
     left: 100%;
 }

 /* ========== BACK TO TOP BUTTON (floating, appears on scroll) ========== */
 #backToTop {
     position: fixed;
     bottom: 40px;
     right: 30px;
     width: 55px;
     height: 55px;
     border-radius: 50%;
     background: #0d4d8b;
     color: white;
     border: none;
     box-shadow: 0 8px 20px rgba(13, 77, 139, 0.5), 0 0 15px #4db3ff;
     font-size: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     transition: 0.3s ease;
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s, background 0.2s, transform 0.2s;
     cursor: pointer;
 }

 #backToTop.show {
     opacity: 1;
     visibility: visible;
 }

 #backToTop:hover {
     background: #0b3f6f;
     transform: translateY(-5px) scale(1.08);
     box-shadow: 0 12px 28px rgba(13, 77, 139, 0.8), 0 0 22px #4db3ff;
 }

 #backToTop i {
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }